<template>
	<view>
		<view class="topWarp">
			<view class="title">
				我的蓝图
			</view>
			<view class="content">
				<view class="stitle">
					成长数据
				</view>
				<view class="echart">
					<view class="item">
						<p>今日打卡数</p>
						<h2>{{ this.todayClick }}</h2>
					</view>
					<view class="item">
						<view class="weekInfo">
							<span>7日打卡数</span>
							<span @tap="goWeek">?</span>
						</view>
						<h2>{{ this.weeklyClick }}</h2>
					</view>
				</view>
			</view>
			<view class="circle">
				<view class="itm">
					<view class="circleTitle">
						今日积分增长
					</view>
					<view class="circleCount">
						{{ increase }}
					</view>
				</view>
				<view class="itm">
					<view class="circleTitle">
						积分增长率%
					</view>
					<view class="circleCount">
						{{ ranking }} %
					</view>
				</view>
				<view class="itm">
					<view class="circleTitle">
						今日完成率%
					</view>
					<view class="circleCount">
						{{ rate }} %
					</view>
				</view>
			</view>
		</view>
		
		<view class="text-area">
			<view class="left">
				<h3>我的积分</h3>
				<span>{{ myIntrgral }}</span>
			</view>
			<view class="right">
				<!-- <p>兑换详情 ></p> -->
				<button type="primary" size="mini" style="background-color: #fff;color: #7EC2ED;font-weight: 1000;" @tap="goExChange">兑换</button>
			</view>
		</view>
		<view class="text-area">
			<view class="left">
				<h3>我的计划</h3>
				<span>{{ allPlan }}</span>
			</view>
			<view class="right">
				<p @tap="goAllPlan">详情 ></p>
			</view>
		</view>
	</view>
</template>

<script>
	import { selectAllPlan, selectTodayClock, selectWeeklyClock, UpdateIntegral,searchUser, selectUsers } from "@/api/index.js"
	export default {
		data() {
			return {
				todayClick: 0,
				weeklyClick: 0,
				rate: 0,
				allPlan: 0,
				ranking: 0,
				increase: 0,
				myIntrgral: 0
			}
		},
		onShow() {
			this.unit()
		},
		methods: {
			goExChange(){
				uni.navigateTo({
					url: "/pages/exchange/exchange?myIntrgral=" + encodeURIComponent(JSON.stringify(this.myIntrgral))
				})
			},
			async unit(){
				let user = uni.getStorageSync("users");
				let userInfo = await selectUsers({user});
				let today = await selectTodayClock({user});
				// console.log(today.data,'today.data.length');
				let plan = await selectAllPlan({user});
				// console.log(plan.data,'plan.data.length');
				let week = await selectWeeklyClock({user});
				this.$store.commit("weekly",week.data)
				console.log(week,'week');
				this.todayClick = today.data.length
				this.allPlan = plan.data.length
				this.weeklyClick = week.data.length
				this.increase = this.increaseData(today.data)
				this.myIntrgral = (this.increaseData(plan.data,user) - userInfo.data[0].medalcount)
				this.$store.commit("IntrgralData",this.myIntrgral)
				// let resss = await searchUser({user})
				// console.log(resss,'ssssssssssssssss');
				// this.myIntrgral = resss.data.data[0].integral
				if(this.allPlan === 0) {
					this.rate = 0
				} else {
					this.rate = (this.todayClick/this.allPlan*100).toFixed(2)
				}
				if(this.myIntrgral === 0){
					this.ranking = 0
				} else {
					this.ranking = (this.increase/this.myIntrgral*100).toFixed(2)
				}
				await UpdateIntegral({
					user,
					integral: this.myIntrgral
					})
			},
			increaseData(data,user){
				let temp = 0;
				data.forEach(item => {
					temp += item.integral
				})
				return temp
			},
			goWeek(){
				uni.navigateTo({
					url: "/pages/weekly/weekly"
				})
			},
			async searchUsers() {
				// let res = await searchUser()
			},
			goAllPlan(){
				uni.navigateTo({
					url: "/pages/appplan/appplan"
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: aliceblue;
	}
.topWarp {
	height: 600rpx;
	background: linear-gradient(#2980B9,#6DD5FA,aliceblue );
	border-radius: 0 0 30% 30%;
	padding: 20rpx;
	color: #fff;
	margin-bottom: 200rpx;
}
.title {
	text-align: center;
	padding: 20rpx 0;
	color: #fff;
	font-size: 1.2rem;
	/* margin-top: var(--window-top); */
	margin-top: 100rpx;
}
.content {
	margin: 50rpx 0;
	/* color: #2980B9; */
}
.echart, .circle {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
}
.circle {
	padding: 10rpx;
	color: #115385;
}
.itm {
	width: 30%;
	background-color: #fff;
	text-align: center;
	padding: 30rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 20rpx;
}
.circleCount {
	width: 150rpx;
	hright: 150rpx;
	border-radius: 50%;
	border: 1px solid cadetblue;
	text-align: center;
	line-height: 150rpx;
	margin-top: 20rpx;
}
.item {
	width: 40%;
	padding: 20rpx;
	background: #2980B9;
	color: #fff;
	border-radius: 20rpx;
}
	.text-area {
		width: 90%;
		padding: 20rpx;
		/* background: linear-gradient(to right, #FF8008,#FFC837); */
		background: linear-gradient(to right, #115385,#7EC2ED);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
		margin-left: calc(5% - 20rpx);
	}
	.left, .right {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #fff;
	}
	.weekInfo {
		display: flex;
		justify-content: space-between;
	}
	.right p{
		font-size: 0.8rem;
	}
</style>
